<template>
  <div id="userManagePage">
<!--    搜索表单-->
    <a-form :model="searchParams"  layout="inline"  @finish="doSearch">

      <a-form-item label="账号">
        <a-input v-model:value="searchParams.userAccount" placeholder="账号"  allow-clear/>
      </a-form-item>
      <a-form-item label="用户名">
        <a-input v-model:value="searchParams.userName" placeholder="用户名"  allow-clear />
      </a-form-item>
      <a-form-item >
        <a-button type="primary" html-type="submit">搜索</a-button>
      </a-form-item>
    </a-form>

    <div style="margin-bottom: 16px"></div>

<!--    -->
    <a-table :columns="columns" :data-source="dataList" :pagination="pagination"
    @change="doTableChange"
    >
      <template #headerCell="{ column }">
        <template v-if="column.key === 'name'">
          <span>
            <smile-outlined />
            Name
          </span>
        </template>
      </template>

      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'userAvatar'">
          <a-image :src="record.userAvatar" :width="120"/>
        </template>
        <template v-else-if="column.dataIndex === 'userRole'">
            <div v-if="record.userRole==='admin'">
              <a-tag color="green">管理员</a-tag>
            </div>
            <div v-else>
              <a-tag color="blue">普通用户</a-tag>
            </div>
        </template>


        <template v-if="column.dataIndex === 'createTime'">
          {{ dayjs(record.createTime).format("YYYY-MM-DD HH:mm:ss")}}
        </template>

<!--        <template v-if="column.dataIndex === 'updateTime'">-->
<!--          {{ dayjs(record.updateTime).format("YYYY-MM-DD HH:mm:ss")}}-->
<!--        </template>-->


        <template v-else-if="column.key === 'action'">
          <a-button danger @click="doDelete(record.id)">删除</a-button>
        </template>
      </template>
    </a-table>
  </div>
</template>
<script lang="ts" setup>
import { SmileOutlined, DownOutlined } from '@ant-design/icons-vue'
import { computed, onMounted, reactive, ref } from 'vue'
import { deleteUserUsingPost, listUserVoByPageUsingPost } from '@/api/userController.ts'
import { message } from 'ant-design-vue'
import dayjs from 'dayjs'
const columns = [
  {
    title: 'id',
    dataIndex: 'id',
  },
  {
    title: 'userAccount',
    dataIndex: 'userAccount',
  },
  {
    title: 'userName',
    dataIndex: 'userName',
  },
  {
    title: 'userAvatar',
    dataIndex: 'userAvatar',
  },
  {
    title: 'userRole',
    dataIndex: 'userRole',
  },
  {
    title: 'createTime',
    dataIndex: 'createTime',
  },
  // {
  //   title: 'updateTime',
  //   dataIndex: 'updateTime',
  // },
  {
    title: 'Action',
    key: 'action',
  },
]

const dataList = ref<API.UserVO[]>([])

const total = ref(0)

// 搜索条件
const searchParams = reactive<API.UserQueryRequest>({})

const fetchData = async () => {
  // searchParams是响应式的，，展开确保这个变量不会收到污染
  const res = await listUserVoByPageUsingPost({ ...searchParams })

  if (res.data.code===0 && res.data.data){
    dataList.value = res.data.data.records ?? []
    total.value = res.data.data.total ?? 0
  }else {
    message.error("获取数据失败"+res.data.message)
  }


}

onMounted(()=>{
  fetchData()
})

// 当searchParams改变的时候，， pagination会动态改变
const pagination = computed(()=>{
  return {
    current: searchParams.current,
    pageSize:searchParams.pageSize,
    total:total.value,
    showSizeChanger:true, // 是否允许切换页码
    showTotal:(total)=>`共${total}条`
  }
})

// pagination修改
const doTableChange = (page:any)=>{
  searchParams.current = page.current
  searchParams.pageSize = page.pageSize

  fetchData()
}


const doSearch = ()=>{
  searchParams.current = 1
  fetchData()
}


const doDelete =async (id:string)=>{
  if (!id){
    return
  }
 const res = await deleteUserUsingPost({id})
  if (res.data.code===0){
    message.success("删除成功")
    fetchData()
  }else{
    message.error("删除成功")
  }
}
</script>
